<!-- 自定义柜子 -->
<template>
    <el-dialog   style="background: rgb(20, 37, 74);color: #fff;"    v-model="props.isShow" :close-on-click-modal="false" append-to-body width="70%" top="10vh" 
        :before-close="handleClose">
        <template #header>
            <span>自定义柜子</span>
        </template>
        <el-form  :inline="true" :model="formInline" class="demo-form-inline" size="small">
            <el-form-item label="选择柜子">
                <el-cascader @change="selectBox" v-model="castaer" :props="{checkStrictly: true}" :options="optionsca"></el-cascader>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onReset">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table class="my-custom-table" :data="tableData" border style="width: 100%" height="400" highlight-current-row
              @select="selectCheckBox" ref="multipleTableRef"
              @current-change="handleCurrentOneChange" row-key="id" :key="toggleRender">
             <el-table-column type="selection" width="55"/>
            <el-table-column prop="cabinetName" label="名称编号" />
            <el-table-column prop="joint" label="节" sortable />
            <el-table-column prop="storey" label="层" sortable />
            <el-table-column prop="side" label="左右面" >
                <template #default="{ row }">
                    <div v-if="row.side === '1'">
                        左面
                    </div>
                    <div v-else>
                        右面
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="capacity" label="容量" sortable />
            <el-table-column prop="remainingCapacity" label="剩余容量" />
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="formInline.current" :page-sizes="[5,10, 20, 30]" v-model:page-size="formInline.size"
            layout="total, sizes, prev, pager, next, jumper" :total="formInline.total">
        </el-pagination>
        <span slot="footer" class="dialog-footer" style="display: flex;justify-content: center;margin-top: 1vh;">
            <el-button @click="confirm">提 交</el-button>
            <el-button type="primary" @click="handleClose">返 回</el-button>
        </span>
    </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { reactive, defineProps, watch, onMounted ,ref} from 'vue';
import { Books } from '../types';
import { getBoxDetail,getCabinetList } from '../../../../../api';
import { ElTable } from 'element-plus';
let toggleRender = ref(1);
const props = defineProps<{ isShow: Boolean, rows: Books[],isMulity:Boolean }>();
const emit = defineEmits(['close', 'choosedBox']);
let castaer = reactive([])
let formInline = reactive({
    name: '',
    side: '',
    joint: '',
    size: 10,
    current: 1,
    total: 0,
    storey:''
})

const multipleTableRef = ref<InstanceType<typeof ElTable>>()

let optionsca = reactive([])

let tableData = ref([])
// 选择的柜子

let chooseBox = reactive<any>([]);

const onSubmit = () => {
    getBoxDetail(formInline).then((res:any) => {
        if(res.code === 200) {
            // tableData.value = [];
            tableData.value = res.data.records||[];
            formInline.total = res.data.total;
            toggleRender.value = toggleRender.value + 1;

            setTimeout(() => {
                tableData.value.forEach((box:any) => {
                    const resRow = chooseBox.find((row:any) => box.drawerId === row.drawerId);
                    if (resRow) {
                        multipleTableRef.value?.toggleRowSelection(box, true);
                    }
                });
            }, 0);
        } else {
            ElMessage.error(res.data.msg);
        }     
    });
}
// 关闭新增弹窗
const handleClose = () => {
    emit('close')
}

const confirm = () => {
    const total = chooseBox.reduce((prev: any, curr: any) => {
        return prev + curr.save
    }, 0)
    if (total < props.rows.length) {
        ElMessage.error(`入库数量${props.rows.length},选择了${total}本`);
    } else {
        const chooseBoxs = JSON.parse(JSON.stringify(chooseBox)) 
        chooseBox = [];
        ElMessage.success('提交成功');
        emit('choosedBox', chooseBoxs);
    }
    
}

watch([()=>props.isShow], ([sumNew]) => {
      if (sumNew) {
        onSubmit();
    }
});



// 选择变化
// const handleSelectionChange = (row: any) => {
//     chooseBox = row;
// }

// 用户点击多选
const selectCheckBox = (row: any,chekced:any) => {
    let selected = row.length && row.indexOf(chekced) !== -1
    if(selected) {
        // 根据row内容比对chooseBox,如果不在就添加,在就删除
        row.forEach((el:any)=>{
            let index = chooseBox.findIndex((item:any)=>item.drawerId === el.drawerId);
            if (index === -1) {
                el.isChecked = true;
                chooseBox.push(el);
            } 
        })
    } else {
        // 根据checked删除row中的内容
        chooseBox.splice(chooseBox.findIndex((el:any)=>el.drawerId === chekced.drawerId),1);
    }
}
const handleCurrentChange = (current: any) => {
    formInline.current = current;
    onSubmit();
}
const handleSizeChange = (size: any) => {
    formInline.size = size;
    onSubmit();
}

const selectBox =(value:any)=>{
    formInline.name = value[0]||'';
    formInline.side = value[1]||'';
    formInline.joint = value[2]||'';
    formInline.storey = value[3]||'';
}

const lazyLoadReq =()=>{
    getCabinetList().then(res=>{
        let data = res.data;
        data = data.map((el:any)=>{
            el.value = el.label;
            return el;
        })
        optionsca = data;
    })
}

const handleCurrentOneChange = (row:any)=>{
    chooseBox = [row];
}

onMounted(()=>{
    lazyLoadReq();
})

const onReset = ()=>{
    // lazyLoadReq();
    castaer = [];
    selectBox([]);
    onSubmit();
}


</script>
<style scoped lang="less">
.app-packed {
    padding: 1vw;
    box-sizing: border-box;
}


 ::v-deep .el-form-item__label{
    color: #fff;
 }
::v-deep.el-table{
    --el-table-tr-bg-color:rgb(23, 41, 76);
    --el-table-bg-color:rgb(23, 41, 76);
    color: #fff ;
}
::v-deep.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
  background: rgb(23, 41, 76);
}
::v-deep.el-table__body tr.current-row>td.el-table__cell{
    background: rgb(23, 41, 76);
}
 .my-custom-table{
  background-color: rgb(22, 48, 86); 
  
}
 /* 设置表头背景色 */  
::v-deep.my-custom-table .el-table__header-wrapper th {  
  background-color: rgb(22, 48, 86);  
  color: rgb(119, 240, 244); 
}  
  
/* 设置鼠标悬停时行的背景色 */  
::v-deep.my-custom-table .el-table__body-wrapper tbody tr:hover > td {  
  background-color: rgb(16, 28, 51); 
} 
</style>